<template>
	<view>
		<image src="/static/navbarbg.png" class="navbarbg" mode=""></image>
		<u-loading-page :loading="loading"></u-loading-page>
		<view class="con" v-if="!loading">
			<view class="header">
				<u-status-bar></u-status-bar>
				<view class="header__top" @click="show=true">
					{{pickname}}
					<u-icon name="arrow-down-fill" color="#141827" size="19rpx"></u-icon>
				</view>
				<!-- 搜索 -->
				<u-search placeholder="搜索" color='#333' searchIconSize='50rpx' :showAction="false" bgColor='#ffffff'
					height='90rpx' placeholderColor='#8D8D8D' v-model="keyword" @change='getliet' ></u-search>
			</view>
			<!-- 列表 -->
			<view class="box">
				<view class="box__top">
					<view class="u-flex u-flex-y-center u-flex-between">
						<view class="u-flex u-flex-y-center">
							<view class="box__top__item" v-for="(item,index) in toplist" :key="index">
								{{item.name}}
							</view>
						</view>
						<view class="box__top__xs">
							动态时间
						</view>
					</view>
					共{{list.length}}人
				</view>
				<scroll-view scroll-y="true" class="con__sc">
					<view class="con__sc__list" v-if="list.length>0">
						<view @click="navto('/pages/customer/info?id='+item.id)" class="con__sc__list__item"
							v-for="(item,index) in list" :key="index">
							<view class="u-flex">
								<image :src="URL(item.avatar)" class="con__sc__list__item__tx" mode="aspectFill">
								</image>
								<view class="" style="flex: 1;">
									<view class="u-flex u-flex-y-center">
										<view class="con__sc__list__item__name">
											{{item.username}}
										</view>
										<view class="con__sc__list__item__yq" v-if="item.over>0">
											逾期
										</view>
									</view>
									<view class="con__sc__list__item__text" v-if="item.lastRecord">
										{{$u.timeFrom(item.lastRecord.createtime, 'yyyy年mm月dd日 hh:MM')}}添加跟进记录
									</view>
									<view class="con__sc__list__item__text">
										{{item.address}}
									</view>
									<view class="u-flex u-flex-y-center u-flex-wrap">
										<view class="con__sc__list__item__tip" v-for="(item1,index1) in item.tags" :key="index1">
											{{item1.name}}
										</view>
									</view>
									<view class="con__sc__list__item__text">
										{{item.customerRecordStaffName}}跟进
									</view>
								</view>
								<view class="con__sc__list__item__ri">
									<image src="/static/kh/call.png" class="con__sc__list__item__call" mode=""></image>
									<!-- <view class="con__sc__list__item__b b1" v-if="defaultIndex[0]==1">
										证据材料
									</view>
									<view class="con__sc__list__item__b" v-if="defaultIndex[0]==1">
										电子合同
									</view>
									<view class="con__sc__list__item__b" v-if="defaultIndex[0]==2">
										查看债券
									</view> -->
								</view>

							</view>
							<view class="con__sc__list__item__line">

							</view>
						</view>
					</view>
					<u-empty v-else text="暂无客户"></u-empty>
				</scroll-view>
			</view>
		</view>
		<image @click="navto('/pages/customer/information')" src="/static/kh/add.png" style="width: 97rpx;
			height: 95rpx;
			position: fixed;
			bottom: 200rpx;
			right: 35rpx;" mode=""></image>
		<u-picker :show="show" :columns="columns" @cancel='show=false' @close='show=false' @confirm='confirm'
			:defaultIndex='defaultIndex'></u-picker>
		<tabbar :current="1"></tabbar>
	</view>
</template>

<script>
	import sale from '@/api/_sale.js'
	export default {
		data() {
			return {
				keyword: '',
				loading:true,
				toplist: [{
						name: '所有客户'
					},
					{
						name: '我的客户常用条件'
					},
				],
				show: false,
				columns: [
					['我的客户','共享客户', ]
				],
				pickname: '我的客户',
				defaultIndex: [0],
				list: [],
				is_public:''
			};
		},
		methods: {
			confirm(e) {
				this.pickname = e.value[0]
				this.defaultIndex = e.indexs
				if(e.indexs[0]==1){
					this.is_public=2
					this.getliet()
				}else{
					this.is_public=''
					this.getliet()
				}
				this.show = false
			},
			async getliet() {
				let res = await sale.customerList({is_public:this.is_public,keyword:this.keyword})
				if (res.data.code == 1) {
					this.loading=false
					this.list = res.data.data
					this.list.map(t => {
						t.tags = JSON.parse(t.label.replaceAll("&quot;", "\""))
					})
					
				}
			}
		},
		onLoad() {
			uni.hideTabBar()
			
		},
		onShow() {
			// this.loading=true
			this.getliet()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.header {
		padding: 0 30rpx 30rpx;

		&__top {
			height: 44px;
			display: flex;
			align-items: center;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 34rpx;
			color: #1E1E1E;
			line-height: 34rpx;
		}
	}

	.box {
		border-radius: 20rpx 20rpx 0 0;
		background: #FFFFFF;
		width: 690rpx;
		margin-left: 30rpx;

		&__top {
			height: 105rpx;
			padding: 30rpx 30rpx 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #626667;
			line-height: 24rpx;

			&__item {
				padding: 0 20rpx;
				height: 51rpx;
				background: #F1F5F8;
				border-radius: 5rpx;
				line-height: 51rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #626667;
				margin-right: 20rpx;
			}

			&__xs {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #1E1E1E;
				line-height: 22rpx;
			}
		}
	}

	.con {

		&__sc {
			// margin-left: 30rpx;
			height: calc(100vh - 44px - 95rpx - 30rpx - var(--status-bar-height) - 159rpx - 146rpx);

			&__list {
				padding-bottom: 50rpx;

				&__item {
					padding-left: 36rpx;

					&__tx {
						width: 94rpx;
						height: 94rpx;
						background: #3262FD;
						border-radius: 46rpx;
						margin-right: 14rpx;
					}

					&__name {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #1E1E1E;
						line-height: 48rpx;
						margin-right: 10rpx;
					}

					&__yq {
						width: 65rpx;
						height: 35rpx;
						background: #3262FD;
						border-radius: 5rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #FFFFFF;
						line-height: 22rpx;
					}

					&__text {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #6D6D6D;
						line-height: 36rpx;
						margin: 8rpx 0;
					}

					&__tip {
						padding: 0 19rpx;
						height: 51rpx;
						background: #F1F5F8;
						border-radius: 5rpx;
						line-height: 51rpx;
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #626667;
						margin: 8rpx 17rpx 8rpx 0;
					}

					&__call {
						width: 78rpx;
						height: 75rpx;
					}

					&__ri {
						padding-right: 35rpx;
						// height: 204rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-end;
						padding-bottom: 60rpx;
					}

					&__b {
						width: 131rpx;
						height: 51rpx;
						background: #3262FD;
						border-radius: 5rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 24rpx;
					}

					.b1 {
						background: #50B674;
					}

					&__line {
						width: 621rpx;
						height: 5rpx;
						background: #F8F8F8;
						margin-left: 31rpx;
						margin-top: 24rpx;
						margin-bottom: 33rpx;
					}
				}
			}
		}
	}

	.navbarbg {
		width: 750rpx;
		height: 902rpx;
		position: fixed;
		top: 0;
		left: 0;
		// z-index: -1;
	}

	::v-deep.u-search__content {
		padding: 0 30rpx !important;

		.u-search__content__input {
			background-color: transparent !important;
		}
	}
</style>